<template>
  <div class="wrap">
    <BreadCrumbView :breadList="breadList"></BreadCrumbView>
    <div class="box">

      <el-alert title="注意：只允许为第三级分类设置相关参数" type="warning" show-icon :closable="false">
      </el-alert>

      <div class="category">
        <div class="block">
          <span class="demonstration">选择商品列表:</span>
          <el-cascader v-model="value" :options="options"
            :props="{ expandTrigger: 'hover',value:'cat_id',label:'cat_name' }" @change="handleChange">
          </el-cascader>
        </div>
      </div>

      <!-- NOTE 选项卡 -->
      <TabView ref="tab" :tableData="tableData" @getAttr="getAttr" @editAttr="editAttr" @removeAttr="removeAttr">
      </TabView>
    </div>
  </div>
</template>

<script>
import api from "@/api/goods/goods";
import BreadCrumbView from '@/components/BreadCrumbView.vue';
import TabView from './components/TabView.vue';
export default {
  name: "ParamsView",
  data() {
    return {
      name: "ParamsView",
      value: [],
      options: [],
      tableData: [],
      id: 0
    };
  },
  computed: {
    breadList() {
      return ["商品管理", "分类参数"];
    }
  },
  methods: {
    // TODO删除
    async removeAttr({ cat_id, attr_id, attr_sel }) {
      await api.removeAttr(cat_id, attr_id);
      this.getAttr(attr_sel);
    },
    // TODO编辑
    async editAttr({ cat_id, attr_id, attr_sel, attr_name },) {
      await api.editAttr(cat_id, attr_id, { attr_name, attr_sel });
    },
    async handleChange(value) {
      this.id = value[2];
      const activeName = this.$refs['tab'].activeName;
      if (activeName == 'only') {
        const res = await api.getOnlyApi(value[2]);
        this.tableData = res;
      } else {
        const res = await api.getAttributesApi(value[2]);
        this.tableData = res;
      }
    },
    async getAttr(name) {
      if (name == 'only') {
        const res = await api.getOnlyApi(this.id);
        this.tableData = res;
      } else {
        const res = await api.getAttributesApi(this.id);
        this.tableData = res;
      }
    }
  },
  async created() {
    const res = await api.getCategoryApi();
    this.options = res;
  },
  components: { BreadCrumbView, TabView }
};
</script>

<style lang="scss" scoped>
.box {
  box-shadow: 0px 0px 13px -6px #000;
  margin-top: 20px;
  position: relative;
  box-sizing: border-box;
  padding: 20px;

  .demonstration {
    margin-right: 10px;
  }
}
</style>